﻿﻿<!DOCTYPE html>
<!--[if lt IE 7 ]>
<html class="ie6 settings-main_background" lang="zh"> <![endif]-->
<!--[if IE 7 ]>
<html class="ie7 settings-main_background" lang="zh"> <![endif]-->
<!--[if IE 8 ]>
<html class="ie8 settings-main_background" lang="zh"> <![endif]-->
<!--[if IE 9 ]>
<html class="ie9 settings-main_background" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="settings-main_background" lang="zh"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <link rel="dns-prefetch" href="//asset.ibanquan.com">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>创·学习</title>
    <meta name="keywords" content="">
    <meta name="description" content="创·学习">
    <meta name="viewport"
          content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <link href='__STATIC__/home/js/bootstrap/css/bootstrap.css' media='screen' rel='stylesheet' type='text/css'/>
    <link href='__STATIC__/home/details/css/detailsIndex.css' media='screen' rel='stylesheet' type='text/css'/>
    <link rel="shortcut icon" href="__STATIC__/home/index/picture/2.png" type="image/x-icon">
    <link href='__STATIC__/home/details/css/base-160225.min.css' media='screen' rel='stylesheet' type='text/css'/>
    <link href='__STATIC__/home/details/css/iconfont_5.css' media='screen' rel='stylesheet' type='text/css'/>
    <link href='__STATIC__/home/details/css/iconfont-1.css' media='screen' rel='stylesheet' type='text/css'/>
    <link href='__STATIC__/home/details/css/main.css' media='screen' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="__STATIC__/home/js/layer/theme/default/layer.css">
    <!--<link rel="stylesheet" href="__STATIC__/home/js/layui/layui.css">-->


    <script src='__STATIC__/home/js/jquery.min.js' type='text/javascript'></script>
    <script src='__STATIC__/home/details/js/jssdk-0.0.18.min.js' type='text/javascript'></script>
    <script src='__STATIC__/home/details/js/lazyload.min.js' type='text/javascript'></script>
    <script src="__STATIC__/home/js/layer/layer.js"></script>
    <script src="__STATIC__/home/js/bootstrap/js/bootstrap.js"></script>
    <!--<script src="__STATIC__/home/js/layui/layui.js"></script>-->

    <script>
        window.productImage = '53f649ffe2931e0b91000007/noimage.png';
        window.vendorImage = '578fc93402282e4f18000003/noimage.png';
        window.iconImage = '57acb51702282e3f00000003/noimage.ico';
        window.shareImage = '57acb53a02282e3f00000007/noimage.png';
        window.assetPath = '//asset.ibanquan.com/image/';
        window.postImage = '581a3b0402282e2bcc000003/s.png';
        window.captchaPath = '//captcha.ibanquan.com';
        window.ajaxToken = '9dd5934c294149a8aaba5a3540d7f709';
    </script>

    <script>(function () {
        var yt = document.createElement('script');
        yt.src = '//asset.ibanquan.com/common/js/tracker-0.0.2.min.js?v=142';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(yt, s);
    })();</script>
</head>
<style>
    #layui-layer1{
        top: 50%;
    }

    #collection {
        width: 135px;
        margin: 0 auto;
        border-radius: 50%;
    }

    @media screen and (min-width: 1200px) {
        video {
            height: 700px;
        }

        #collection {
            width: 200px;
        }

        #span1 {
            color: rgb(255, 0, 0);
            font-size: 40px;

        }

    }

    @media screen and (max-width: 1200px) {
        video {
            height: 500px;
        }

        #collection {
            width: 200px;

            height: auto;
        }

        #span1 {
            color: rgb(255, 0, 0);
            font-size: 40px;

        }

    }

    @media screen and (max-width: 768px) {
        video {
            height: 350px;
        }

        #span1 {
            color: rgb(255, 0, 0);
            font-size: 34px;

        }

        #collection {
            width: 170px;
            height: auto;
        }

    }

    @media screen and (max-width: 500px) {
        video {
            height: 250px;
        }

        #span1 {
            color: rgb(255, 0, 0);
            font-size: 22px;

        }

        #collection {
            width: 150px;

            height: auto;
        }

    }

    .badge {
        vertical-align: top;
    }

    #span1:hover {
        background-color: #0d78ef;
    }

</style>

<body>

<!--电脑导航-->
<div class="head container settings-top_background">
    <div class="head-t">
        <div class="head-btn settings-top_color">
            <i class="iconfont icon-hanbao" id="nav_mobile"></i>
        </div>
        <div class="head-tl">
            <a href="{:url('home/index/index')}">
                <img src="__STATIC__/home/common/img\456.png" alt="创·学习">
            </a>
        </div>

        <div class="head-tr">
            <div id="navline" style=""></div>
            <ul class="dropdown-list">


                <li class="dropdown-list-item">
                    <a class="dropdown-link settings-nav_text_color"
                       href="{:url('home/index/index')}"

                    >
                        首页
                    </a>
                </li>


                <li class="dropdown-list-item">
                    <a class="dropdown-link settings-nav_text_color"
                       href="{:url('home/courses/index')}"

                    >
                        课程分类
                    </a>
                </li>


                <li class="dropdown-list-item">
                    <a class="dropdown-link settings-nav_text_color"
                       href="{:url('home/article/index')}"

                    >
                        文章
                    </a>
                </li>


                <li class="dropdown-list-item">
                    {if condition="$sessionUser.user_id gt 0"}
                    <a class="dropdown-link settings-nav_text_color"
                       href="{:url('home/center/index')}">个人中心
                    </a>
                    {else /}
                    <a class="dropdown-link settings-nav_text_color"
                       href="{:url('home/users/login')}">登录注册
                    </a>
                    {/if}
                </li>

                <li class="dropdown-list-item">
                    {if condition="$sessionUser.user_id gt 0"}
                <li class="dropdown-list-item">
                    <a class="del dropdown-link settings-nav_text_color"
                    >
                        退出
                    </a>
                </li>
                {/if}
                </li>

                <!---->
            </ul>
        </div>

    </div>
</div>
<!--手机导航-->
<div class="container wrapper-mobile_nav" id="mobile_menu">
    <div class="mobile_nav">
        <!-- -->
        <div class="mobile_nav_menu settings-mobi_nav_background">
            <div class="mobile_nav_top settings-top_color settings-main_border">
                <a href="/">
                    <img src="__STATIC__/home/common/img/456.png" alt="创·学习">
                </a>
                <i class="iconfont icon-close" id="closeMbileNav"></i>
            </div>
            <!-- 一级菜单 -->
            <ul id="side-nav-link" class="side-nav-link">


                <li class="side-nav-link-each">
                    <a class="settings-nav_text_color settings-sideLinkHover_color"
                       href="{:url('home/index/index')}"

                    >
                        首页
                    </a>
                </li>


                <li class="side-nav-link-each">
                    <a class="settings-nav_text_color settings-sideLinkHover_color"
                       href="{:url('home/courses/index')}"

                    >
                        课程分类
                    </a>
                </li>


                <li class="side-nav-link-each">
                    <a class="settings-nav_text_color settings-sideLinkHover_color"
                       href="{:url('home/article/index')}"

                    >
                        文章
                    </a>
                </li>


                <li class="side-nav-link-each">
                    {if condition="$sessionUser.user_id gt 0"}

                    <a class="settings-nav_text_color settings-sideLinkHover_color"
                       href="{:url('home/center/index')}">
                        个人中心
                    </a>
                    {else /}
                    <a class="settings-nav_text_color settings-sideLinkHover_color"
                       href="{:url('home/users/login')}">
                        登录注册
                    </a>
                    {/if}
                </li>

                <li class="side-nav-link-each">
                    <a class="settings-nav_text_color settings-sideLinkHover_color"
                       href="{:url('home/index/contact')}"

                    >
                        联系我们
                    </a>
                </li>

                {if condition="$sessionUser.user_id gt 0"}
                <li class="side-nav-link-each">
                    <a class="del settings-nav_text_color settings-sideLinkHover_color">
                        退出
                    </a>
                </li>
                {/if}


                <!---->
            </ul>
        </div>
        <div class="mobile_nav_bg" id="mobile_bg"></div>
        <!-- -->
    </div>
</div>

<!--内容-->
<div class="index container settings-main_background_color">
    <!--视频-->
    <div class="index-top" style="width: 90%;margin: auto;border: 1px solid rgba(178,179,168,0.67)">

        <div class="container" id="div">
            <div id="divVideo"></div>
            {if condition="($orders eq 1) AND ($details.courses_money gt 0)"}
            <div class=" index-headline-text"><a onclick="coursesMoney()" href="javascript:;" style="color: red">本视频为付费视频 ￥{$details.courses_money}</a></div>
            {/if}
        </div>

    </div>
    <!--发布人信息-->
    <div id="features">
        <ul>
            <li>
                <a href="javascript:;">
                    <div class="icon icon1"><img src="{$details.courses_photo}" title="{$details.user_name}"></div>
                </a>
            </li>
            <li>
                <div class="icon icon1">
                    <p class="title">{$details.courses_name}</p>
                    <p class="title">{$details.user_name}</p>
                    <p class="sub-title">{$details.courses_time|date="Y-m-d",###}</p>
                </div>
            </li>
            <li>
                <div id="collection">
                    <span>
                        {if condition="($collection eq 0) AND ($sessionUser.user_id gt 0)"}
                        <span id="span1" class="glyphicon glyphicon-heart"></span>
                        <span class="badge" style="background-color: #00c0ef; color:red">以收藏</span>
                        {else /}
                        <a id="aCollection" href="javascript:;" title="收藏">
                            <span id="span1" class="glyphicon glyphicon-heart-empty"></span>
                        </a>
                        <span class="badge" style="background-color: #00c0ef; color:red">未收藏</span>
                        {/if}

                        <div class="bdsharebuttonbox">
                            <!--<a href="#" class="bds_more" data-cmd="more"></a>-->
                            <a href="#" class="bds_qzone" data-cmd="qzone"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina"></a>
                            <a href="#" class="bds_tqq" data-cmd="tqq"></a>
                            <a href="#" class="bds_renren" data-cmd="renren"></a>
                            <a href="#" class="bds_weixin" data-cmd="weixin"></a>
                        </div>
                    </span>

                </div>

            </li>

        </ul>
    </div>

    <!--推荐视频-->
    <div class="figures1">
        <div class="title"><a href="javascript:;" class='index-box-hd-more'>推荐视频</a></div>
        <ul>
            {volist name="res" id="v"}
            <li>
                <div class="javascript:;">
                    <a href="{:url('home/details/index')}?id={$v.courses_id}"><img src='{$v.courses_photo}' title="{$v.courses_name}"/></a>
                    <div class="index-headline-text">{$v.courses_name}</div>
                </div>
            </li>
            {/volist}
        </ul>
    </div>
    <!--评论-->
    <div class="figures3">
        <div class="title"><a href="javascript:;" class='index-box-hd-more'>最新评论</a></div>
        <!--写评论-->
        <div class="panel panel-default" style="margin-bottom: 0">
            <div class="panel-body">
                <div class="div-1" style="height: 60px;line-height: 60px">
                    <a href="javaScript:;" class="user-head l">
                        <img src={if condition="(empty($sessionUser.user_id)) OR ($sessionUser.user_id neq 0)" }"__STATIC__/home/common/img/akari.jpg"{else
                        /}"{$sessionUser.user_photo}"{/if} width="60" height="60" class="img-circle">
                    </a>
                    <span class="span-1" style="padding-left: 20px;">
                        {if condition="$sessionUser.user_id gt 0"}
                            {if condition="empty($sessionUser.user_photo)"}
                            <a href="#" style="color: #ff5442">上传头像</a>
                            {else /}
                            {$sessionUser.user_name}
                            {/if}
                        {else /}
                        <a data-toggle="modal" data-target="#myModal" style="color: #ff5442">请，登录</a>
                        {/if}
                    </span>

                </div>
                <div class="form-group" style="margin: 5px">
                    <!--当前课程ID-->
                    <input type="hidden" class="coursesId" name="courses_id" value="{$details.courses_id}">
                    <!--当前登录者ID-->
                    <input type="hidden" class="userId" name="user_id" value="{$sessionUser.user_id}">
                    <textarea id="tetx" class="form-control" rows="3" style="width: 95%"></textarea>
                </div>
                {if condition="$sessionUser.user_id gt 0"}
                <span id="tetxSpan" class="btn btn-info pull-right">评论</span>
                {else /}
                <span class="btn btn-info pull-right"><a data-toggle="modal" data-target="#myModal" style="color: #ff5442">请，登录</a></span>
                {/if}

                <!--登录弹窗-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    登录
                                </h4>
                            </div>
                            <div class="modal-body">

                                <form class="bs-example bs-example-form" role="form">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="input-group">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">
                                                       账号
                                                    </button>
                                                </span>
                                                <input type="text" class="form-control mobile" style="height: auto;width: 80%;" value="" placeholder="请输入手机号码">
                                            </div><!-- /input-group -->
                                        </div>
                                        <div class="col-lg-6" style="padding-top: 3%">
                                            <div class="input-group">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">
                                                       密码
                                                    </button>
                                                </span>
                                                <input type="password" class="form-control user_pwd" style="height: auto; width: 80%;" value="" placeholder="请输入密码">
                                            </div><!-- /input-group -->
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭
                                </button>
                                <button type="button" class="btn btn-primary">
                                    登录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--显示评论-->
        <div id="pingl">
            <div class="pl-container">
                <ul id="ulVideocom">
                    {volist name="videocom" id="v"}
                    <li class="pl-list clearfix">
                        <div class="pl-list-avator">
                            <a href="javascript:;" target="_blank">
                                {if condition="!empty($v.user_photo)"}
                                <img width="40" height="40" src="{$v.user_photo}" title="{$v.user_name}">
                                {else /}
                                <img width="40" height="40" src="__STATIC__/home/common/img/akari.jpg" title="︿(￣︶￣)︿他很懒">
                                {/if}
                            </a>
                        </div>
                        <div class="pl-list-main">
                            <div class="pl-list-nick">
                                <a href="javascript:;" target="_blank">{if condition="!empty($v.user_photo)"}{$v.user_name}{else /}!!!∑(ﾟДﾟノ)ノ他懒的名字都忘了{/if}</a>
                            </div>
                            <div class="pl-list-content">{$v.comment_text}</div>
                            <div class="pl-list-btm clearfix">
                                <span class="pl-list-time l">{$v.comment_time|date="Y-m-d",###}</span>
                            </div>
                        </div>
                    </li>
                    {/volist}
                </ul>
            </div>

        </div>
    </div>

</div>
<!--脚部-->
<div class="footer container settings-footer_background">
    <div class="footer-content">
        <div class="footer-t">
            <div class="footer-t-l">
                <div class="footer-nav">

                    <a class="footer-link settings-footer_text_color" href="https://youhaosuda.com/">关于我们</a>

                    <span class="footer-split settings-footer_text_color">|</span>


                    <a class="footer-link settings-footer_text_color" href="https://youhaosuda.com/">友情链接</a>

                    <span class="footer-split settings-footer_text_color">|</span>


                    <a class="footer-link settings-footer_text_color" href="/posts?dir_id=15730">旅游指南</a>

                    <span class="footer-split settings-footer_text_color">|</span>


                    <a class="footer-link settings-footer_text_color" href="/pages/g000001">游客服务</a>


                </div>
            </div>
        </div>
        <div class="footer-b settings-footer_text_color">
            © 2017 youhaosuda.com All rights reserved.Powered by Youhaosuda.
        </div>
    </div>
</div>
</body>

<script src='__STATIC__/home/details/js/main.js' type='text/javascript'></script>

<!--收藏-->
<script>
    $(document).ready(function () {
        $('#aCollection').click(function () {
            var data = {};
            data.courses_id = {$details['courses_id']};
            var sessionUser = "{$sessionUser['user_id']}";

            if (sessionUser == "") {
                layer.tips('登录后就可以收藏哦', '#span1', {tips: [3, "red"]});
                return false;
            }
//            console.dir(data);

            $.post("{:url('home/details/collection')}", data, function (data) {

                if (data > 0) {

                    layer.tips('收藏成功了哦', '#span1', {tips: [3, "red"]});
                    $("#span1").attr("class", "glyphicon glyphicon-heart");
                    $(".badge").html("以收藏");
                    $('#aCollection').unbind("click");
                    return false;

                } else {

                    layer.tips('收藏失败了', '#span1', {tips: [3, "red"]});
                    return false;
                }

            })
        })
    })
</script>
<!--评论-->
<script>
    $(document).ready(function () {

        //跳转登录
        $(".btn-primary").click(function () {

            var data = {};
            data.mobile = $(".mobile").val();
            data.user_pwd = $(".user_pwd").val();

            if(data.mobile == ""){
                layer.tips('账号不能为空', '.mobile', {tips: [3, "red"]});
                return false;
            }
            if(!/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/.test(data.mobile)){
                layer.tips('请输入正确账号', '.mobile', {tips: [3, "red"]});
                return false;
            }
            if(data.user_pwd == ""){
                layer.tips('密码不能为空', '.user_pwd', {tips: [3, "red"]});
                return false;
            }

            $.post("{:url('home/users/login')}",data,function (data) {

                if(data == 0){

                    layer.msg('登录成功！！', {icon: 1,offset: '50%'});
                    setTimeout(function(){
                        window.location.reload();
                    },2000);

                }else if(data == 1){
                    layer.msg('密码或账号不正确！！', {icon: 5,offset: '50%'});

                }else {
                    layer.msg('亲，你还没注册哦。', {icon: 7,offset: '50%'});
                }


            })


        })



        //评论
        $('#tetxSpan').click(function () {
            var data = {};
            data.courses_id = $('.coursesId').val();
            data.user_id = $('.userId').val();
            data.comment_text = $('#tetx').val();

            if (data.comment_text == "") {
                return false;
            }

            $.post("{:url('home/details/videOcom')}", data, function (data) {

                var json = JSON.parse(data);

                if (json != 1) {

                    $("#ulVideocom").prepend(json);
                    $("#tetx").val('');
                } else {
                    layer.msg('评论失败', {icon: 2,offset: '50%'});
                }


            })

        })
    })
</script>
<!--退出-->
<script>

    $(document).ready(function () {
        $(".del").click(function () {
            $.get("{:url('home/users/login_out')}", function (data) {

                console.debug(data);

                if (data == 1) {
                    layer.msg('退出成功！！', {icon: 1});

                    setTimeout(function () {
                        window.location.href = "{:url('home/index/index')}";
                    }, 500);

                }
            })
        })
    })
</script>
<!--视频-->
<script>
    var clientWidth = document.getElementById("div").style.width;
    playVideo({
        //所有参数，elemt和src为必填其他看需求怎么要求
        //elemt为播放控件要插入的容器，
        // src为视频文件地址，
        // preload为预加载，
        // autoplay是否页面进入就自动播放
        //poster为播放前的遮照图片，
        // loop为是否循环播放，
        // width和heigth默认100%
        elemt: document.getElementById("divVideo"),
        src: "{$details.courses_content}",    //此地址是在本机测试用的，如果发布在服务器上请写服务器的绝对路径。我是发布在外网上的，例如：http://www.tttt.com/test/3.mp4
        preload: "true",
        autoplay: "false",
        poster: "{$details.courses_photo}",
//            poster: "/uploads/photo/20171024\\1ef14cf022813a66814ef8db40cc4481.jpg",
        loop: "false",
        width: clientWidth,
        heigth: ""
    });

    function playVideo(opt) {
        if (typeof (opt) == "undefined") {
            alert("请传入必要参数！");
            return;
        }
        if (typeof (opt.elemt) == "undefined") {
            alert("请指定播放器要插入的对象！");
            return;
        }
        if (typeof (opt.src) == "undefined") {
            alert("请指定要播放视频的路径！");
            return;
        }
        var _this = this;
        _this.elemt = opt.elemt;                                       //播放器要插入的对象
        _this.src = opt.src;                                           //视频的URL(必设)
        _this.width = opt.width > 0 ? opt.width + "px" : "100%";       //宽度(默认100%)
        _this.height = opt.height > 0 ? opt.height + "px" : "100%";    //高度(默认100%)
        _this.autoplay = opt.autoplay == "true" ? "autoplay" : "";     //自动播放（true为自动播放）
        _this.poster = opt.poster;                                     //视频封面，播放时的封面图片
        _this.preload = opt.preload == "true" ? "preload" : "";        //预加载(true时启动加载)
        _this.loop = opt.loop == "true" ? "loop" : "";                 //循环播放(true时循环播放)
        var str = "<video id='video' controls ";                   //根据设置的属性的值，拼写video控件
        str += " width='" + _this.width + "' height='" + _this.height + "' " + _this.autoplay + " " + _this.preload + " " + _this.loop + " ";
        if (typeof (_this.poster) != "undefined") {
            str += " poster='" + _this.poster + "' >";
        } else {
            str += " > ";
        }
        str += " <source src='" + _this.src + "'  type='video/mp4; codecs='avc1.42E01E, mp4a.40.2''/>";
        str += "</video>";
        _this.elemt.innerHTML = str; //将str放到要插入的对象中
    }

</script>
<!--分享-->
<script>
    window._bd_share_config = {
    "common": {
        "bdSnsKey": {},
        "bdText": "",
        "bdMini": "2",
        "bdPic": "",
        "bdStyle": "0",
        "bdSize": "16"
    },
    "share": {},
//    "image": {"viewList": ["qzone", "tsina", "tqq", "renren", "weixin"], "viewText": "分享到：", "viewSize": "16"},
//    "selectShare": {"bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]}
};
with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>
<!--购买-->
<script>

    function coursesMoney() {
        var sessionUser = "{$sessionUser['user_id']}";

        layer.msg('确定购买吗？', {
            time: 0 //不自动关闭
            , btn: ['必须啊', '不要(╯°Д°)╯']
            ,offset: '50%'
            , yes: function (index) {
                layer.close(index);
                if (sessionUser == "") {
                    window.location.href = "{:url('home/users/login')}";
                    return;
                }

                var order= {};
                order.courses_id = {$details['courses_id']};
                order.total_money = {$details['courses_money']};

                console.dir(order);

                $.post("{:url('home/order/orderInsert')}",order,function (data) {

//                    console.log(data);
//                    return false;

                    window.location.href = "{:url('home/order/index')}";

                })
            }
        })
    }

</script>
</html>
